<template>
  <el-drawer
    title="订单详情"
    :visible.sync="drawer"
    custom-class="custom-drawer"
    size="40%"
    @close ="drawerClose"
    :with-header="false">
    <div class="title">
        <span>订单详情</span>
    </div>
    <div class="table_detial">
        <el-table
        :data="orderDetialsList"
        border
        header-row-class-name="active-header" cell-class-name="table-center" header-cell-class-name="table-center"
        style="width: 100%" size="mini">
        <el-table-column
            prop="title"
            label="产品名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="price"
            label="价格"
            width="180">
        </el-table-column>
        <el-table-column
            prop="guige"
            label="规格">
        </el-table-column>
        <el-table-column
            prop="num"
            label="数量">
        </el-table-column>
        <el-table-column
            prop="sum"
            label="小计（元）">
        </el-table-column>
        </el-table>
    </div>
     
</el-drawer>
</template>

<script>
 export default {
    props:{
       drawer:{
            type:Boolean,
            default:false
       },
       orderDetialsList:{
            type:Array,
            default: function() {
                return [];
            }
       }
    },
    data(){
        return {
            tableData:[]
        }
    },
    methods:{
        drawerClose(){
            this.$emit('updateDrawerStatus', false); // 关闭抽屉时触发父组件的事件
        }
    }
  };
</script>

<style scoped lang="less">
.title {
    margin:20px;
}
.table_detial{
     margin:20px;
}
.table_detial{
    /deep/ .active-header{
        color: #333;
      }
    /deep/ .table-center{
        text-align: center;
    }
}

</style>